<!--
 * @Author: your name
 * @Date: 2020-02-25 13:32:39
 * @LastEditTime: 2020-02-28 11:25:55
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \福路德扫码系统\html\cksm.html
 -->
<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0,viewport-fit=cover" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>Hello APP</title>
    <link rel="stylesheet" type="text/css" href="../css/vant.css">
    <link rel="stylesheet" type="text/css" href="../css/base.css" />
    <link rel="stylesheet" type="text/css" href="../css/local.css" />
    <script type="text/javascript" src="../script/jquery.js"></script>
    <script type="text/javascript" src="../script/layer/mobile/layer.js"></script>
    <script type="text/javascript" src="../script/vue.min.js"></script>
    <script type="text/javascript" src="../script/vant.min.js"></script>
    <script type="text/javascript" src="../script/fastclick.js"></script>
    <script type="text/javascript" src="../script/base.js"></script>
    <style type="text/css">
        .bottom {
            padding: 8px 15px;
        }

        .title {
            font-size: 17px;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            word-break: break-all;
            padding-right: 10px;
        }

        .date {
            float: right;
            font-size: 12px;
            color: #cbcbcb;
        }

        .sub {
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            word-break: break-all;
            font-size: 14px;
            color: #a3a3a3;
        }

        .sub2 {
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            word-break: break-all;
            font-size: 16px;
            color: #272727;
        }

        .creater {
            font-size: 14px;
        }

        .result span {
            background: #fdf9f8;
            border: 1px solid #eeebec;
            border-radius: 10px;
            font-size: 12px;
            transform: scale(0.9);
            display: inline-block;
            height: 16px;
            line-height: 14px;
            padding: 0 2px;
        }

        .status-0 span {
            transform: scale(1);
            border: 0;
            background: #ffffff;
            color: #e3b474;
        }

        .status-1 span {
            color: #47ba9c;
        }

        .status-2 span {
            color: #dd7e70;
        }

        .bo {
            padding-top: 10px;
        }

        .sq {
            display: inline-block;
            font-size: 13px;
            padding: 0 2px;
            margin-right: 5px;
            min-width: 16px;
            height: 18px;
            line-height: 18px;
            border-radius: 4px;
            text-align: center;
            background-color: #3396fb;
            color: #ffffff;
        }

        .title span {
            vertical-align: middle;
        }

        .tab {
            height: 26px;
        }

        .tab>div {
            border-radius: 6px;
            overflow: hidden;
            border: 1px solid #3396fb;
            font-size: 0;
            height: 26px;
        }

        .tab .tab-row {
            display: inline-block;
            font-size: 13px;
            padding: 2px 5px;
            color: #3396fb;
            line-height: 22px;
        }

        .tab .tab-row.on {
            background: #3396fb;
            color: #ffffff;
        }

        .van-search {
            padding: 5px 0;
        }

        .title-read {
            color: #aaacac;
            font-size: 13px;

        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <div class="box" style="user-select:none;">
            <div style="border-bottom: 1px solid rgba(235,237,240,0.3);">
                <van-nav-bar-main :title="titleName" left-arrow @click-left="onClickLeft">
                    <!-- <div slot="right">
                         <div class="tab">
                             <div>
                                 <div class="tab-row" :class="sort_value1==0?'on':''" @click="toggleApprove(0)">未完成</div>
                                 <div class="tab-row" :class="sort_value1==1?'on':''" @click="toggleApprove(1)">已完成</div>
                             </div>
                         </div>
                     </div> -->
                </van-nav-bar-main>
            </div>

            <div class="content">

                <van-list v-model="listLoading" :finished="listFinished" finished-text="没有更多了" @load="listOnLoad">
                    <van-cell-group>
                        <van-cell @click="intoRow(row,'FSDealID','5SReviewDetail')" v-for="(row,index) in dataList">
                            <div>
                                <van-row :gutter="30">
                                    <van-col span="24">
                                        <div class="sub2">整改项目：{{row.itemName}}</div>
                                    </van-col>
                                    <van-col span="24">
                                        <div class="sub">责任人：{{row.UserName}}</div>
                                    </van-col>
                                    <van-col span="12">
                                        <div class="sub">整改状态：
                                            <span v-if="row.Status==0"
                                                style="color:red;">{{getStatusName(row.Status)}}</span>
                                            <span v-else-if="row.Status==1"
                                                style="color:green;">{{getStatusName(row.Status)}}</span>
                                        </div>
                                    </van-col>
                                    <!-- <van-col span="12">
                                         <div class="creater">由{{row.Creater}}发起</div>
                                     </van-col> -->
                                </van-row>
                            </div>
                        </van-cell>
                    </van-cell-group>
                </van-list>

            </div>

            <!-- <div class="bottom"> -->
            <!-- <div class="flex-main">
                    <van-row gutter="30">
                        <van-col :span="24">
                            <van-button type="info" block round @click="startNew5SRev">发起新评审</van-button>
                        </van-col>
                    </van-row>
                </div> -->
            <!-- </div> -->
        </div>

        <van-popup v-model="showNewStart" position="bottom">
            <div style="padding-bottom: 10px;">
                <van-cell title="部门名称" :value="ClassName" required @click="openBaseScreen('部门')"></van-cell>
                <van-cell title="年/月" :value="getMon(YearMonth)" required @click="openDate()"></van-cell>
                <van-cell title="周" :value="WeekName" required @click="openSelect()"></van-cell>
            </div>
            <div class="btn-padding">
                <van-button color="#2fa2b9" type="primary" block style="border-radius: 0;" @click="addNew5SRev">确认新增
                </van-button>
            </div>
        </van-popup>

        <van-popup v-model="showDate" position="bottom">
            <van-datetime-picker v-model="currentYearMonth" type="year-month" title="选择年月" :min-date="minDate"
                :formatter="formatter" @confirm="confirmDate" @cancel="cancelDate" cancel-button-text="清空">
            </van-datetime-picker>
        </van-popup>

        <van-popup v-model="showSelect" position="bottom">
            <van-picker show-toolbar :columns="selectColumns" value-key="name" @confirm="confirmSelect"
                @cancel="cancelSelect"></van-picker>
        </van-popup>

    </div>
</body>
<script type="text/javascript">
    var vm;
    apiready = function () {

        api.addEventListener({
            name: 'refreshList'
        }, function (ret, err) {
            vm.refreshList();
        })

        api.addEventListener({
            name: 'selectRow'
        }, function (ret, err) {
            var type = ret.value.type;
            var row = ret.value.row;
            if (type == '部门') {
                vm.ClassID = row[0].ClassID;
                vm.ClassName = row[0].ClassName;
            }
        })

        vm = new Vue({
            el: '#app',
            data: {
                titleName: api.pageParam.titleName,
                showLoading: false,
                listLoading: false,
                listFinished: true,
                showDate: false,
                showSelect: false,
                showNewStart: false,
                ClassID: '',  //评审部门
                ClassName: '',
                YearMonth: '',    //评审日期
                WeekValue: '',
                WeekName: '',
                currentYearMonth: '',    //新建评审年月
                currentWeek: 0,  //新建评审周
                minDate: new Date(2022, 0, 1),
                selectColumns: [
                    { id: 1, name: '第一周', value: 1 },
                    { id: 2, name: '第二周', value: 2 },
                    { id: 3, name: '第三周', value: 3 },
                    { id: 4, name: '第四周', value: 4 },
                    { id: 5, name: '第五周', value: 5 }
                ],
                pageIndex: 1,
                pageSize: 20,
                dataList: [{
                    F5SID: 1, F5SWeek: '2022-07-18/2022-07-24', Result: '已审', Creater: '张三'
                },
                { F5SID: 2, F5SWeek: '2022-07-11/2022-07-17', Result: '未审', Creater: '李四' }]
            },
            created: function () {
                var that = this;
                that.getDataList();
            },
            methods: {
                refreshList() {
                    var that = this;
                    that.pageIndex = 1;
                    that.getDataList();
                },
                getDataList: function () {
                    var that = this;
                    var obj = {
                        pageIndex: that.pageIndex,
                        pageSize: that.pageSize,
                        ToUserID: APP.getUserInfo().UserID, //当前登录用户
                        Status: -1,  //单据状态
                        beginTime: '',
                        endTime: ''
                    }
                    APP.ajax('5S_GetAllDeal', obj, function (res) {
                        that.dataList = res.ds;
                        // console.log(JSON.stringify(res.ds))
                        that.listFinished = false;
                    })
                },
                listOnLoad: function () {
                    var that = this;
                    that.pageIndex++;
                    var obj = {
                        pageIndex: that.pageIndex,
                        pageSize: that.pageSize,
                        ToUserID: APP.getUserInfo().UserID, //当前登录用户
                        Status: -1,  //单据状态
                        beginTime: '',
                        endTime: ''
                    }
                    APP.ajax('5S_GetAllDeal', obj, function (res) {
                        that.listLoading = false;
                        if (res.ds.length == 0) {
                            that.listFinished = true;
                        }
                        that.dataList = that.dataList.concat(res.ds);
                    })
                },
                intoRow: function (row, key, pageName) {
                    var that = this;
                    api.openWin({
                        name: pageName,
                        url: pageName + '.html',
                        reload: true,
                        slidBackEnabled: false,
                        allowEdit: true,
                        pageParam: {
                            id: row[key],   //整改问题ID
                            id2: row.DailyFSDeID   //明细项目ID
                        }
                    })
                },
                getStatusName(value) {
                    var str = ''
                    if (value == 0) {
                        str = '未整改';
                    } else if (value == 1) {
                        str = '已整改';
                    }
                    return str;
                },
                getWeekName(value) {
                    var res = '';
                    if (value && value >= 1 && value <= 5) {
                        res = '第' + value + '周';
                    }
                    return res;
                },
                startNew5SRev() {
                    vm.showNewStart = true;
                },
                addNew5SRev() {
                    vm.showNewStart = false;

                    if (!vm.ClassName) {
                        layer.open({
                            content: '请选择部门',
                            skin: 'msg',
                            time: 2
                        });
                        return false;
                    }
                    if (!vm.YearMonth) {
                        layer.open({
                            content: '请选择年月',
                            skin: 'msg',
                            time: 2
                        });
                        return false;
                    }
                    if (!vm.WeekName) {
                        layer.open({
                            content: '请选择周',
                            skin: 'msg',
                            time: 2
                        });
                        return false;
                    }

                    var obj = {
                        WeekDate: vm.WeekValue,
                        CDate: vm.YearMonth,
                        ClassID: vm.ClassID,
                        UserName: APP.getUserInfo().UserName
                    }

                    APP.ajax('5S_AddDailyDetail', obj, function (res) {
                        if (res.ds[0].status == 500) {
                            layer.open({
                                content: res.ds[0].msg,
                                skin: 'msg',
                                time: 2
                            });
                        } else {
                            api.openWin({
                                name: '5SDetail',
                                url: '5SDetail.html',
                                reload: true,
                                slidBackEnabled: false,
                                allowEdit: true,
                                pageParam: {

                                }
                            })
                        }
                    })
                },
                getMon(value) {
                    var tmp = [];
                    var res = '';
                    if (value) {
                        tmp = value.split('-');
                        var year = tmp[0];
                        var month = tmp[1];
                        if (month.substring(0, 1) == '0') {
                            month = month.slice(1);
                        }
                        res = year + '年' + month + '月';

                    } else {
                        res = ''
                    }
                    return res;
                },
                openDate() {
                    var that = this;
                    that.showDate = true;
                },
                confirmDate(value) {
                    var that = this;
                    var tmp = APP.getFormatDate2('yyyy-MM-dd', value);
                    that.YearMonth = tmp;
                    that.showDate = false;
                },
                cancelDate(value) {
                    var that = this;
                    that.YearMonth = '';
                    that.showDate = false;
                },
                openSelect(str) {
                    var that = this;
                    that.showSelect = true;
                },
                confirmSelect(value, index) {
                    var that = this;
                    that.WeekValue = that.selectColumns[index].value;
                    that.WeekName = that.selectColumns[index].name;
                    that.showSelect = false;
                },
                cancelSelect(value, index) {
                    var that = this;
                    that.WeekValue = '';
                    that.WeekName = '';
                    that.showSelect = false;
                },
                openBaseScreen(str) {
                    var that = this;
                    var obj;
                    if (str == '部门') {
                        obj = {

                            allowClear: false,
                            cmd: '5S_getClass',
                            type: str,
                            localSearch: {
                                showText: 'ClassName',		//查询结果显示的字段
                                searchBy: ['ClassName']		//按那些字段进行搜索
                            },
                            param: {

                            }

                        }
                    }
                    api.openWin({
                        name: 'baseScreen',
                        url: 'tool/baseScreen.html',
                        reload: true,
                        slidBackEnabled: false,
                        allowEdit: true,
                        pageParam: obj
                    })
                },
                formatter(type, val) {
                    if (type === 'year') {
                        return `${val}年`;
                    } else if (type === 'month') {
                        return `${val}月`;
                    }
                    return val;
                },
                onClickLeft: function () {
                    api.closeWin();
                }
            }
        })
    };
</script>

</html>